<template>
	<view class="accountBind">
		<Navigation title="收款账号绑定" backType="back" background="#fff" />
		<view class="f ai-c w-f h-128 ai-c ph-40 list jc-s-b">
			<view class="f ai-c ">
				<image src="../static/login/wx.png" class="w-64 h-64"></image>
				<view class="ml-20 w-96 mr-40 fs-32 text-color4">微信</view>
				<view class="fs-32 bind" v-if="wallet.wxOpenId">已绑定</view>
				<view class="fs-32 text-color3" v-else>未绑定</view>
			</view>
			<view class="f ai-c">
				<view class="fs-28 text-color8 mr-20" v-if="wallet.wxOpenId" @click="unbind(1)">解除绑定</view>
				<view class="fs-28 text-color mr-20" v-else @click="showbind(1)">去绑定</view>
				<u-icon name="arrow-right" color="#999999" size="11"></u-icon>
			</view>
		</view>
		<!--#ifdef APP-PLUS-->
		<view class="f ai-c w-f h-128 ai-c ph-40 list jc-s-b">
			<view class="f ai-c ">
				<image src="../static/login/zfb.png" class="w-64 h-64"></image>
				<view class="ml-20 w-96 mr-40 fs-32 text-color4">支付宝</view>
				<view class="fs-32 bind" v-if="wallet.alipayAccount">已绑定</view>
				<view class="fs-32 text-color3" v-else>未绑定</view>
			</view>
			<view class="f ai-c">
				<view class="fs-28 text-color8 mr-20" v-if="wallet.alipayAccount" @click="unbind(2)">解除绑定</view>
				<view class="fs-28 text-color mr-20" v-else @click="showbind(2)">去绑定</view>
				<u-icon name="arrow-right" color="#999999" size="11"></u-icon>
			</view>
		</view>
		<!--#endif-->
		<u-modal :show="show" title="绑定账号" @confirm="bind" @close="show=false">
			<view class="slot-content" style="width: 100%;">
				<input v-model="account" placeholder="请输入内容"
					style="width: 100%;height: 40rpx;font-size: 28rpx;padding-bottom: 10rpx;border-bottom: 1px solid #e2e2e2;" />
			</view>
		</u-modal>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { walletGet, bindPayWay, unBindPayWay, socialUser } from '@/services/api/index';
	import { onShow } from '@dcloudio/uni-app';
	import { useAuthStore } from '@/store/modules/auth';
	const wallet = ref({});
	const show = ref(false);
	const account = ref('');
	const authStore = useAuthStore();
	const type = ref('');
	getWallet()
	//钱包
	async function getWallet() {
		const { data } = await walletGet();
		wallet.value = data;

	}
	async function unbind(vl : number) {
		uni.showModal({
			title: '解除绑定',
			content: '是否解除收款账号的绑定？',
			confirmText: '解除',
			confirmColor: '#F54040',
			cancelText: '我再想想',
			cancelColor: '#222222',
			success: async function (res) {
				if (res.confirm) {
					await unBindPayWay({
						type: vl,
					});
					uni.showToast({
						title: '解绑成功',
						icon: 'none',
					});
					getWallet()
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	function showbind(vl : number) {
		uni.showModal({
			title: '是否授权微信绑定',
			success: res => {
				if (res.confirm) {
					uni.login({
						provider: 'weixin',
						success: async (res) => {
							let result = await socialUser({  socialType: 10, loginCode: res.code });
							await bindPayWay({
								type: 1,
								payAccount: result.data.openid
							});
							uni.showToast({
								title: '绑定成功',
								icon: 'none',
							});
						},
					})
				}
			}
		})
	}

	async function bind() {
		uni.showModal({
			title: '绑定账号',
			content: '是否绑定收款账号？',
			confirmText: '绑定',
			cancelText: '我再想想',
			cancelColor: '#222222',
			success: async function (res) {
				if (res.confirm) {
					await bindPayWay({
						type: type.value,
						payAccount: account.value
					});
					uni.showToast({
						title: '绑定成功',
						icon: 'none',
					});
					show.value = false;
					account.value = '';
					getWallet()
				} else if (res.cancel) {
					show.value = false;
					account.value = '';
					console.log('用户点击取消');
				}
			}
		});
	}
</script>
<style lang="scss" scoped>
	.accountBind {
		background: #f5f5f5;
		min-height: 100vh;

		.bind {
			color: #25B85B;
		}

		.list {
			border-bottom: 1px solid #f5f5f5;
			background: #fff;
		}
	}
</style>